1<template>
	<view class="page-wraper">
		<customNav  bgColor="#3957BF" :backIcon="false" backIconColor="white"></customNav>
		<!-- <addressSearch @addressBtn='addressBtn' @searchBtn='searchBtn'></addressSearch> -->
		<view class="contentViewBox">
			<cssArcBackground bgColor="#3957BF" height="30" />
			<view class="header">
				<view class="header-card">
					<view style="flex-direction: row; display: flex;">
						<view>
							<image class="profile-photo" :src="userInfo.imageurl" mode=""></image>
							<view class="info-card">
								<view class="name-label">
									<text v-if="userInfo.user_name" class="name-text">{{userInfo.user_name}}</text>
									<text v-if="userInfo.city" class="city-text">（{{userInfo.city}}）</text>
								</view>
								<view v-if="userInfo.company_name" class="address-text">
									<text>{{userInfo.company_name}}</text>
								</view>
								<!-- <view v-if="userInfo.timename" class="time-text">
									<text>注册时长：{{userInfo.timename}}</texst>
								</view> -->
							</view>
						</view>
						
						<view   class="member_tag" style="display: flex;align-items: center;justify-content: center; height: 50px; flex: 1;">
							<view v-if="memberCard.name" class="" style="height: 20px; flex:1; display: flex; justify-content: flex-end">
								<image :src="memberCard.icon_url"  style="width: 20px; height: 20px;"></image>
								<!-- <view class="member_tag_bkg"> {{memberCard.name}}</view> -->
							</view>
							<view class="" style="width: 20px;"></view>
						</view>
						
						<image @click="gotoSettings()" style="margin-top: 14px; margin-right: 12px; height: 22px; width: 20px;" src="../../../static/me-setting.png"></image>
						
					</view>
										
					<view @click="openMember()" v-if="userInfo.member_card_id == '0' || userInfo.member_card_id === ''" class="member-card">
						<view class="member-card-left">
							<view class="member-title">车商通会员中心</view>
							<view class="member-subtitle">您还没有开通会员</view>
						</view>
						<view class="member-card-right" >
							<text class="member-start-bubble">
								戳我开通会员
							</text>
						</view>
					</view>
					
					<view class="function-card">
						<text class="function-title">基本功能</text>
						<view class="function-line">
							<view class="function-box" style="background-color: ;" @click="mineClickFuc('find')">
								<image class="function-icon"  src="/static/me_xunche.png" mode="aspectFit"></image>
								<view><text class="function-text">我的寻车</text></view> 
							</view>
							<view class="function-box" style="background-color: ;" @click="mineClickFuc('price')">
								<image class="function-icon" src="/static/me_baojia.png" mode="aspectFit"></image>
								<view><text class="function-text">我的报价</text></view>
							</view>
							<view class="function-box" style="background-color: ;" @click="mineClickFuc('collect')">
								<image class="function-icon" src="/static/me_shoucang.png" mode="aspectFit"></image>
								<view><text class="function-text">我的收藏</text></view>
							</view>
							<view class="function-box" style="background-color: ;" @click="mineClickFuc('report')">
								<image class="function-icon" src="/static/me_baobiao.png" mode="aspectFit"></image>
								<view><text class="function-text">我的报表</text></view>
							</view>
<!-- 							<view class="function-box" style="background-color: ;" @click="mineClickFuc('worker')">
								<image class="function-icon" src="/static/me_tongshi.png" mode="aspectFit"></image>
								<view><text class="function-text">我的同事</text></view>
							</view> -->
						</view>
						<view class="function-line">
<!-- 							<view class="function-box" style="background-color: ;" @click="mineClickFuc('follow')">
								<image class="function-icon" src="/static/me_guanzhu.png" mode="aspectFit"></image>
								<view><text class="function-text">我的关注</text></view> 
							</view> -->

							<view class="function-box" style="background-color: ;" @click="mineClickFuc('auth')">
								<image class="function-icon" src="/static/me_renzheng.png" mode="aspectFit"></image>
								<view><text class="function-text">我的认证</text></view>
							</view>
							<view class="function-box" style="background-color: ;">
								
							</view>
							<view class="function-box" style="background-color: ;">
								
							</view>
							<view class="function-box" style="background-color: ;">
								
							</view>

						</view>

					</view>
					
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	
	import {getUserInfo} from '@/api/user.js'
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				userInfo: {},
				memberCard: {},
				memberLevel: '',
				memberLevelImgUrl: '/static/member_tag_normal.png',
			}
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('login');
				value="1"  
				if (value === '') {
					uni.navigateTo({
						url: '/pages/login/login',
					})
				} else {
					let id = value.id;
					var that = this
					getUserInfo(id)
					.then(res => {
						if (res.code == 0) {
							that.userInfo = res.data
							if (res.data.member_card_id != '0') {
								that.memberCard = res.data.member_card
								if (that.memberCard) {
									that.memberLevel = res.data.member_card.name
									that.memberLevelImgUrl = res.data.member_card.cover_url
								}							
							}
							
						} else {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					.catch(e => {
					})
				}
			} catch (e) {
				// error
			}
		},
		methods: {
			mineClickFuc(name) {
				this.$utils.log(name)
				switch (name) {
					case "find": {
						uni.navigateTo({
							url: '/pages/home/secondhandCar/meSearchCar/meSearchCarList/meSearchCarList'
						})
						break;
					}
					case "price": {
						uni.navigateTo({
							url: '/pages/home/offer/myOfferList'
						})
						break;
					}
					case "collect": {
						uni.navigateTo({
							url: '/pages/home/secondhandCar/meSave/meSave'
						})
						break;
					}
					case "worker": {
						uni.navigateTo({
							url: '/pages/home/secondhandCar/index'
						})
						break;
					}
					case "follow": {
						uni.navigateTo({
							url: '/pages/home/logistics/logistics'
						})
						break;
					}
					case "report": {
						uni.navigateTo({
							url: '/pages/user/report/report'
						})
						break;
					}
					case "auth": {
						uni.navigateTo({
							url: '/pages/user/auth/auth'
						})
						break;
					}
				}
			},
			addressBtn(address) {
				this.$utils.toastDebug('点击选择城市   ' + address)
			},
			searchBtn(content) {
				this.$utils.toastDebug('点击搜索按钮 input输入的内容：   ' + content)
			},
			
			gotoSettings() {
				uni.navigateTo({
					url: '/pages/user/settings/settings'
				})
			},
			
			openMember() {
				uni.navigateTo({
					url: '/pages/user/member/member'
				})
			}
		}
	}
</script>

<style>
	
	.function-icon {
		margin-top: 5px;
		width: 20px;
		height: 20px;
	}
	
	.function-line {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		-webkit-flex: 1;
		flex: 1;
	}
	.function-box {
		height: 50px;
		flex: 1;
		text-align: center;
	}
	
	.function-card {
		margin-top: 40px;
	}
	
	.function-text {
		width: 48px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 0px;
		color: #333333;
		opacity: 1;
	}
	

	.function-title {
		font-size: 15px;
		font-weight: bold;
		line-height: 0px;
		color: #000026;
	}
	
	.member_tag {
		
	}
	
	.member_tag_bkg {
		width: 58px;
		/* height: 30px; */
		height: 20px;
		/* background: linear-gradient(75deg, rgba(210,244,252,0.22) 0%, #CCFBFF 100%); */
		opacity: 1;
		font-size: 10px;
		font-family: YouSheBiaoTiHei;
		font-weight: bold;
		color: #333333;
		background: url('/static/member_tag_normal.png');
		background-repeat: no-repeat;
		background-size:70px 23px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 15px;
	}
	
	.member-card {
			 margin-top: 20px;
			 width: 100%;
			 height: 61px;
			 background: linear-gradient(178deg, #1C2125 0%, #676A6D 100%);
			 background-color: greenyellow;
			 opacity: 1;
			 border-radius: 7px;
			 display: flex;
			 flex-direction: row;
			 -webkit-flex: 1;
			 flex: 1;
			 -webkit-justify-content: center;
			 justify-content: center;
			 -webkit-align-items: center;
			 align-items: center;
	}
	
	.member-start-bubble {
		padding: 7px;
		width: 99px;
		height: 28px;
		background: linear-gradient(117deg, #FFEBC9 0%, #FFD99A 100%);
		border-radius: 14px;
		font-size: 12px;
		font-weight: 500;
		line-height: 0px;
		color: #333333;
	}
	
	.member-card-left {
		/* margin-top: 10px; */
		margin-left: 10px;
		flex: 1;
	}
	
	.member-card-right {
		flex: 1;
		text-align: right;
		margin-right: 10px;
	}
	
	.member-title {
		
		font-size: 14px;
		color: #EFCE98;
		font-weight: bold;
	}
	
	.member-subtitle {
		margin-top: 5px;
		font-size: 10px;
		color: #FFFFFF;
	}

	 .header {
		 width: 100%;
		 height: auto;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 margin-top: -170rpx;
	 }
	 
	 .header-card {
		/* background-color: yellow;*/
		background-color: white;
		 width: 90%;
		 height: 125px;
		 border-radius: 20rpx;
	 }
	 
	 .profile-photo {
		 border: 1rpx solid white;
		 border-radius: 60rpx;
		 border-width: 5rpx;
		 border-color: white;
		 width: 120rpx;
		 height: 120rpx;
		 margin-top: -60rpx;
		 margin-left: 50rpx;
	 }
	 
	 .info-card {
		 margin-top: 5px;
		 margin-left: 14px;
	 }
	 
	 .name-label {
		 
	 }
	 
	 .name-text {
		 font-size: 16px;
		 color: #000026;
		 font-weight: bold;
	 }
	 
	 .city-text {
		 font-size: 12px;
		 color: #999999;
		 font-weight: 500;
	 }
	 
	 
	 .address-text {
		 margin-top: 5px;
	 	font-size: 12px;
	 	color: #999999;
		font-weight: 400;
	 }
	 
	 .time-text {
		 margin-top: 5px;
		 font-size: 12px;
		 color: #999999;
		 font-weight: 400;
	 }
	 

	
	.line-5 {
		width: 100%;
		height: 20rpx;
		background-color: #F6F6F6;
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		background-color: #fefefe;
	}

	.header-class {
		width: 100%;
		height: auto;
		display: flex;
		background-color: #4E6ECC;
		justify-content: center;
		align-items: center;
	}

	.address-view-class {
		margin-left: 10rpx;
	}


	.address-img {
		font-size: 20rpx;
		background-color: #A1B1E0;
		padding: 3rpx 4rpx;
		border-radius: 6rpx;
	}

	.inputView {
		flex: 4;
		margin: 10rpx;
	}

	.inputClass {

		background-color: #fefefe;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 50rpx;
		font-family: uniicons;
		text-decoration: none;
	}

	.contentViewBox {
		width: 100%;
		height: auto;
		/* 父元素设置相对定位 */
		/* position: relative; */
	}

	.swiperImageViewClass {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		z-index: 1;
		text-align: center;
		margin-top: 15rpx;
	}

	.imageSwiperClass {
		height: 200rpx;
		width: 96%;
		border-radius: 20rpx;
	}


	.view-box {
		padding: 20rpx;
		display: flex;
	}

	.view-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-item-san {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.xincheViewClass {
		display: flex;
		flex-direction: row;
		background-color: #E7ECFB;
		padding: 20rpx 80rpx 20rpx 80rpx;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.xincheText {
		color: #2C57D5;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.kuaibao-ershou-box {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.kuaibaoView {
		background-color: #F6F2FE;
		padding: 35rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		width: auto;
		border-radius: 20rpx;
	}

	.ershoucheView {
		background-color: #EBF7F7;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10rpx;
		width: auto;
		border-radius: 20rpx;
	}

	.kuaibaoText {
		color: #8B57D6;
		margin: 10rpx;
	}

	.ershoucheText {
		color: #64BBBF;
		margin: 10rpx;
	}

	.view-img {
		width: 60rpx;
		height: 60rpx;
	}

	.view-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #000000;
		font-family: 'Courier New', Courier, monospace;
	}

	.view-da-img {
		width: 100%;
		height: 360rpx;
	}

	.ms-box {
		padding: 20rpx;
		text-align:left;
	}

	.ms-title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		font-family: 'Courier New', Courier, monospace;
	}

	.ms-content {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.ms-image {
		width: 100%;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
</style>